<template>
    <view>
		<!-- 头部 -->
		<view class="head"></view>
		<view class="txt">附近的教练</view>
		<!-- 地图内容 -->
		<view class="page-body">
			<view class="page-section page-section-gap">
				<map style="width: 100%; height: 550px;" :latitude="latitude" :longitude="longitude" :markers="covers"
				@markertap = "findOneCoach($event)" >
				</map>
			</view>
		</view>
		<!-- 返回按钮 -->
		<view class="foot">
			<button @click="returnCoach()">返回上一层</button>
		</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
			id:0, // 使用 marker点击事件需要填写id
            title: 'map',
            latitude: '',
            longitude: '',
			clickable: true, // 地图上的点可以点击
			// 示例
            // covers: [{
            //     latitude: 39.909,
            //     longitude: 116.39742,
            //     iconPath: '/static/yogaimg/location.png'
            // }, {
            //     latitude: 39.90,
            //     longitude: 116.39,
            //     iconPath: '/static/yogaimg/location.png'
            // }],
			covers:[]
        }
    },
	onReady() {
		// 获取学员经纬度并展示在地图中间
		this.getstuInfo()
		
		// 获取所有教练经纬度
		this.getAllCoach()
	},
    methods: {
		getstuInfo(){
			this.$u.api.findStuById().then(res => {
				this.latitude = res.data.latitude
				this.longitude = res.data.longitude
			})
		},
		getAllCoach(){
			this.$u.api.findAllCoach().then(res => {
				this.covers = res.data
				for(var i = 0 ; i < res.data.length ;i ++){
					this.covers[i].id = res.data[i].coachId + ""
					this.covers[i].latitude = res.data[i].lat 
					this.covers[i].longitude = res.data[i].lng		
					this.covers[i].iconPath = res.data[i].coachWechat // 显示教练头像
					// 点击时显示教练信息,目前没找到点击iconPath可以触发方法,所以简易写一下信息
					this.covers[i].title = res.data[i].coachName + ",电话:" + res.data[i].coachTel 
				}
			})
		},
		
		findOneCoach(e){
			
			
			console.log("--------------------------------------------------------")
			console.log(e.detail.markerId)
			let p=e.detail.markerId
			uni.navigateTo({
			    url: '/pages/life/buyCoach/buyCoach?id='+p,
			});
		},
		returnCoach(){
			uni.switchTab({
			    url: '/pages/tabbar/life/life'
			});
		}
    }
}
</script>

<style>
	.head{
		height: 200rpx;
		width: 100%;
	}
	.txt{
		margin-bottom: 100rpx;
	}
	.foot{
		margin-top: 50rpx;
	}
</style>
